<template>
  <button @click="onAddRigth">onAddRigth</button>
  <button @click="onTest">onTest</button>

  <div id="wrapper">
    <div class="col-wrap" style="margin-left: 70px;">
      <div :id="item" @click="onElement(item)" class="state-item" :key="item" v-for="(item) in leftIds">{{ item }}</div>
    </div>
    <div class="col-wrap">
      <div :id="item" @click="delElement(item)" class="state-item" :key="item" v-for="(item) in rightIds">{{ item }}</div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onBeforeMount, onMounted, inject, nextTick } from 'vue'
import { Connection, EndpointOptions, jsPlumb } from 'jsplumb'

import JsPlumbLine from './JsPlumbLine'
import * as _ from 'lodash'
export default defineComponent({
  components: {

  },
  setup() {
    let plumbLine:JsPlumbLine
    let leftIds = ['item-1', 'item-2', 'item-3', 'item-4']
    let rightIds = ['item-5', 'item-6', 'item-7', 'item-8']
    let conns = [['item-1', 'item-7'], ['item-2', 'item-5']]

    let state = reactive({
      leftIds: leftIds,
      rightIds: rightIds,
      conns: conns
    })
    // 增加 右侧元素
    let onAddRigth = async() => {
      console.log(state)
      state.rightIds.push('item-9', 'item-10', 'item-11')
      await nextTick()
      plumbLine.addRigthid(['item-9', 'item-10', 'item-11'])
      console.log(state)
    }

    let onTest = async() => {
      plumbLine.test()
      plumbLine.changeConnColor('item-3', {
        stroke: '#a89f9f',
        strokeWidth: 6
      })
    }
    // 删除一个元素
    let delElement = async(id:string) => {
      console.log('delElement =%s', id)
      state.rightIds = _.difference(state.rightIds, [id])
      await nextTick()
      plumbLine.removeElementIds([id], 'right')
    }
    // 连线成之后的方法
    let connectionFun = (uuid:string[]) => {
      console.log('connectionFun =%o', uuid)
    }
    // 选中一个元素
    let onElement = async(id:string) => {
      await nextTick()
      console.log('onElement =%s', id)
      plumbLine.selectElement(id)

      // 点线时调用方法
      let clickConnectionFun = (uuid:string[], labelFlag:boolean) => {
        console.log('clickConnectionFun =%o ,labelFlag=%s', uuid, labelFlag)
      }
      // 删除连线之前方法
      let beforeDelConnFun = (uuid:string[]):boolean => {
        return true
      }
      // 删除连线之后方法
      let delConnFun = (uuid:string[]) => {
        console.log('mydelConnFun =%o ', uuid)
      }
      onMounted(() => {
        plumbLine = new JsPlumbLine({
          leftIds: leftIds,
          rightIds: rightIds,
          connects: conns,
          connectionFun: connectionFun,
          clickConnectionFun: clickConnectionFun,
          beforeDelConnFun: beforeDelConnFun,
          delConnFun: delConnFun
        })
        // 加线
        // plumbLine.addConnect('item-1', 'item-8')
        plumbLine.chagneColorByEndpoint('item-3', {
          stroke: '#ffffff',
          fill: '#2f7ddb',
          strokeWidth: 1
        })
      })
      return {
        onTest,
        onAddRigth,
        delElement,
        onElement,
        ...toRefs(state)
      }
    }
  }
})
</script>

<style lang="scss" scoped>
  #wrapper {
    background:
            radial-gradient(
                            ellipse at top left,
                            rgba(255, 255, 255, 1) 40%,
                            rgba(229, 229, 229, .9) 100%
            );
    height: 500px;
    padding: 60px 80px;
    width: 700px;
    display:flex;
    flex-direction:row;
    justify-content:space-between;

  }
  .col-wrap{
    display:flex;
    flex-direction:column
  }
  .item-hover{
    background:red !important;
  }
  .state-item {
    width: 80px;
    height: 40px;
    color: #606266;
    background: #f6f6f6;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    line-height: 40px;
    font-family: sans-serif;
    border-radius: 4px;
    margin-right: 60px;
    margin-top: 5px;
  }
  .line-wrap {
    display: flex;
    margin-bottom: 40px;
  }
</style>
